<template>
  <div class="dashboard-editor-container">
      <div class="card_shadow">
        <div class="card_content event-box ">
            <div class=" event-box-item bg-1 bg-2 ">
              <img class="img" src="../assets/index/device_num.png">
              <div class="num-tip">设备数量</div>
              <div class="num-tip2">{{device.num}}
                <span class="num-tip3">个</span>
              </div>
          </div>

          <div class="event-box-item ml-20 bg-1 bg-2">
            <img class="img" src="../assets/index/device_alarm.png">
            <div class="num-tip">设备告警</div>
            <div class="num-tip2">{{device.alarm}}
              <span class="num-tip3">个</span>
            </div>
          </div>
          <div class="event-box-item ml-20 bg-1 bg-2">
            <img class="img" src="../assets/index/device_onLine.png">
            <div class="num-tip">设备在线</div>
            <div class="num-tip2">{{device.onLine}}
              <span class="num-tip3">个</span>
            </div>
          </div>
          <div class="event-box-item ml-20 bg-1 bg-2">
            <img class="img" src="../assets/index/device_offline.png">
            <div class="num-tip">设备离线</div>
            <div class="num-tip2">{{device.offline}}
              <span class="num-tip3">个</span>
            </div>
          </div>
          <div class="event-box-item ml-20 bg-1 bg-2">
            <img class="img" src="../assets/index/device_crm.png">
            <div class="num-tip">CRM数据</div>
            <div class="num-tip2">{{device.crm}}
              <span class="num-tip3">个</span>
            </div>
          </div>
          <div class="event-box-item  bg-1 bg-2">
            <img class="img" src="../assets/index/device_shenglan.png">
            <div class="num-tip">圣兰数据</div>
            <div class="num-tip2">{{device.shenglan}}
              <span class="num-tip3">个</span>
            </div>
          </div>
          <div class="event-box-item ml-20 bg-1 bg-2">
            <img class="img" src="../assets/index/device_fanwei.png">
            <div class="num-tip">泛微数据</div>
            <div class="num-tip2">{{device.fanweil}}
              <span class="num-tip3">个</span>
            </div>
          </div>
          <div class="event-box-item ml-20 bg-1 bg-2">
            <img class="img" src="../assets/index/device_accessControl.png">
            <div class="num-tip">门禁数据</div>
            <div class="num-tip2">{{device.accessControl}}
              <span class="num-tip3">个</span>
            </div>
          </div>
          <div class="event-box-item ml-20 bg-1 bg-2">
            <img class="img" src="../assets/index/device_offline1.png">
            <div class="num-tip">设备离线</div>
            <div class="num-tip2">{{device.offline_f}}
              <span class="num-tip3">个</span>
            </div>
          </div>
          <div class="event-box-item ml-20 bg-1 bg-2">
            <img class="img" src="../assets/index/device_crm1.png">
            <div class="num-tip">CRM数据</div>
            <div class="num-tip2">{{device.crm_f}}
              <span class="num-tip3">个</span>
            </div>
          </div>
        </div>
      </div>

    <el-row :gutter="12">
      <el-col :span="16">
        <div class="card_leftDown">
          <div class="card_title_index"><img class="icon" src="../assets/index/device_commission.png"></div>
          <div class="charts-wrapper">
            <div class="order-table">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="我的待办" name="toDo" class="table-title" >
                  <el-table ref="expertTable" :data="orderToDoList" height="440">
                    <el-table-column label="工单名称" prop="msgTitle" align="center">
                      <template slot-scope="scope">
                        <a target="_blank" :href="scope.row.msgUrl">{{scope.row.msgTitle}}</a>
                      </template>
                    </el-table-column>
                    <el-table-column label="来源系统" prop="appName" align="center"/>
                    <el-table-column label="紧急程度" prop="urgentLevel" align="center"/>
                    <el-table-column label="发送人" prop="senderName" align="center"/>
                    <el-table-column label="接收时间" prop="receiveTime" align="center"/>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="我的已办" name="do">
                  <el-table ref="expertTable" :data="orderDoList"  height="440">
                    <el-table-column label="工单名称" prop="msgTitle" align="center"/>
                    <el-table-column label="来源系统" prop="appName" align="center"/>
                    <el-table-column label="紧急程度" prop="urgentLevel" align="center"/>
                    <el-table-column label="发送人" prop="senderName" align="center"/>
                    <el-table-column label="接收时间" prop="receiveTime" align="center"/>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="more" @click="openMore">
              more
            </div>
          </div>
        </div>

      </el-col>
      <el-col :span="8">
        <div class="card_rightDown">
          <div class="card_title_index"><img class="icon" src="../assets/index/common_application.png"><span>常用应用</span></div>
          <div class="charts-wrapperApplication application-box">
            <template v-for="(item,index) in systemList">
              <div class="application-box-item application-box-item-hover">
                <img class="img" :src="item.iconUrl">
                <div class="num-tip">{{ item.systemName }}</div>
              </div>
            </template>
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import $ from "jquery";
import {getDevice, getWorkOrderListByUser} from "@/api/index"

export default {
  name: 'Index',
  data() {
    return {
      device:{
        num:0,
        alarm:0,
        onLine:0,
        offline:0,
        crm:0,
        shenglan:0,
        fanweil:0,
        accessControl:0,
        offline_f:0,
        crm_f:0
      },
      landMonitorData: [],
      landTransData: [],
      carTypeData: [],
      expertList: [],
      // 我的问题表格数据
      questionList: [],
      systemList: [
        {
          systemName: "圣兰",
          iconUrl: require("../assets/index/" + "application_shenglan.png"),
          bgImage: require("../assets/image/home/" + "area_invading.png"),
        },
        {
          systemName: "CRM",
          iconUrl: require("../assets/index/" + "application_crm.png"),
          bgImage: require("../assets/image/home/" + "special_populations.png"),
        },
        {
          systemName: "泛微",
          iconUrl: require("../assets/index/" + "application_fanwei.png"),
          bgImage: require("../assets/image/home/" + "unsanitary.png"),
        },
        {
          systemName: "凡贝",
          iconUrl: require("../assets/index/" + "application_fanbei.png"),
          bgImage: require("../assets/image/home/" + "illegal_parking.png"),
        },
        {
          systemName: "云喇叭",
          iconUrl: require("../assets/index/" + "application_cloudHorn.png"),
          bgImage: require("../assets/image/home/" + "illegal_parking.png"),
        },
        {
          systemName: "智能充电",
          iconUrl: require("../assets/index/" + "application_charge.png"),
          bgImage: require("../assets/image/home/" + "illegal_parking.png"),
        },
        {
          systemName: "三会一课",
          iconUrl: require("../assets/index/" + "application_lesson.png"),
          bgImage: require("../assets/image/home/" + "illegal_parking.png"),
        },
        {
          systemName: "问卷调查",
          iconUrl: require("../assets/index/" + "application_questionnaireInvestigation.png"),
          bgImage: require("../assets/image/home/" + "illegal_parking.png"),
        },
      ],
      activeName: 'toDo',
      orderToDoList: [],
      orderDoList: []
    }
  },

  computed: {
  },
  created() {
    this.init();
  },
  mounted() {
    const expertTable = this.$refs.expertTable
    this.scrollFun(expertTable)
  },
  methods: {
    getDeviceNum () {
      getDevice().then(response => {
        if(response.code==200){
          this.device = response.data[0]
        }
      });
    },
    init(){
      //回显设备占用数量
      this.getDeviceNum();
      this.getWorkOrderList();
    },
    scrollFun(ref) {
      const divData = ref.bodyWrapper
      this.timer = setInterval(() => {
        divData.scrollTop += 1
        if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
          divData.scrollTop = 0
        }
      }, 50)
    },
    handleClose() {
      this.noticeOpen = false;
    },
    openDialog() {
      $('.newsDetail-body').parent().css('height', $(window).innerHeight() - 85).css('top', 0).css('overflow-y', 'auto');
    },
    handleClick() {

    },
    // 获取工单信息
    getWorkOrderList() {
        let that = this;
        that.orderToDoList = [];
        that.orderDoList = [];
        getWorkOrderListByUser().then((res)=>{
          if (res.code === 200) {
            that.orderToDoList = res.data.toDoList;
            that.orderDoList = res.data.doList;
          }
        })
    },
    // 跳转更多
    openMore() {
      this.$router.push({
        path: 'middlePlatform/workOrder'
      })
    }
  },
  destroyed() {
  }
  ,
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
.event-hover :hover{
  background-color: aliceblue;

}
.dashboard-editor-container {
  padding: 0 10px 16px 10px;
  height: 100%;
  margin-bottom:10px;
}

.charts-wrapper {
  position: relative;
  width: 100%;
  height: calc(100% - 20vh);
}
.charts-wrapperApplication {
  position: relative;
  width: calc(100% );
  height: calc(100% - 15vh);
}

.card_shadow {
  height: 270px;
  /* height: 25%; */
  position: relative;
  margin-top: 10px;
  /* margin-bottom: 6px; */
  /* box-shadow: 0 0 8px -2px #06c;*/
  background: #ffffff;
  /* border-radius: 3px; */
  //margin-left: 16px;
  //margin-right: 16px;
}
.card_leftDown {
  height: 500px;
  /* height: 75%; */
  position: relative;
  margin-top: 15px;
  background: #ffffff;
  //margin-left: 16px;
  //margin-right: 16px;
}
.card_rightDown {
  height: 500px;
  /* height: 75%; */
  position: relative;
  margin-top: 15px;
  background: #ffffff;
  //margin-right: 16px;
}

.button {
  width: 50px;
  height: 30px;
  background: rgb(239, 244, 249);
  display: flex;
  justify-content: center;
  align-items: center;
}



.card_title_index {
  padding: 14px 0px 0px 0px;
  min-height: 40px;
  margin: 0 8px;
  // border-bottom: 1px dashed #dbdfe6;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);

  .icon {
    width: 30px;
    // float: left;
    // margin-right: 2px;
    vertical-align: middle;
  }
}

.card_title_index span {
  font-size: 16px;
  padding: 0 2px 7px 7px;
  // float: left;
  /*border-bottom: 3px solid #0085d0;*/
}

.card_content {
  height: 100%
}

.event-box {
  padding: 20px 0px 0px 20px;

  .event-box-item {
    height: calc(50% - 20px);
    width: calc(20% - 20px);
    margin-bottom: 20px;
    float: left;
    background-size: 100% 100%;
    padding-left: 15px;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(246, 246, 246, 1);
    border-radius: 8px 8px 8px 8px;
    .img {
      position: absolute;
      width: 40px;
      top: 30px;
    }

    .num-tip {
      position: absolute;
      left:64px;
      top:38px;
      font-weight: bold;
      font-family: 'PingFang SC', XHW-pzh, 'Lantinghei SC', 'Helvetica Neue',
        Helvetica, Arial, 'Microsoft YaHei', '微软雅黑', STHeitiSC-Light, simsun,
        '宋体', 'WenQuanYi Zen Hei', 'WenQuanYi Micro Hei', sans-serif;
      line-height: 25px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC, Helvetica Neue, Arial, sans-serif;
      color: rgba(51, 51, 51, 1);
      font-weight: 400;
      text-align: left;
      white-space: nowrap;
    }

    .num-tip1 {
      position: absolute;
      right: 40px;
      line-height: 25px;
      top: 35px;
      clear: both;
      font-size: 16px;
      color: rgb(22, 119, 255);
    }
    .num-tip2 {
      position: absolute;
      right: 40px;
      line-height: 25px;
      top: 38px;
      clear: both;
      font-size: 26px;
      color: rgba(49, 51, 53, 1);
      font-size: 26px;
      font-weight:700
    }
    .num-tip3 {
      margin-left: 8px;
      position: absolute;
      font-size: 16px;
      color: rgba(49, 51, 53, 1);
      font-size: 14px;
      font-weight:lighter
    }

    .three-text {
      top: 11px;
      left: 130px;
    }
  }

  .bg-1:hover {
    background-color: rgba(245, 247, 251, 1);
  }

  .bg-2{
    background-color: rgba(251, 252, 254, 1);
  }


  .ml-20 {
    margin-left: 20px;
  }
}


.title {
  width: 80%;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  line-height: 30px;
}

.title .name {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 30px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 100px;
}
.application-box {
  padding: 10px ;

  .application-box-item {
    height: 140px;
    width: 33%;
    margin-bottom: 0px;
    float: left;
    background-size: 100% 100%;
    position: relative;
    cursor: pointer;
    .img {
      position:absolute;;
      left: 50%;
      top:16px;
      margin-left:-30px;
      width: 60px;
    }
    .num-tip {
      position: absolute;
      top: 86px;
      height: 36px;
      line-height: 26px;
      float: left;
      font-size: 16px;
      font-weight: 500;
      width: 100%;
      text-align: center;
    }
  }
}
.order-table{
  margin-top:-37px;
  margin-left: 50px;
  margin-right: 30px;
}
::v-deep .order-table td.el-table__cell{
  border-bottom: 0;
}
.application-box-item-hover:hover{
  background-color: rgba(245, 247, 251, 1);
}
::v-deep .el-tabs__item {
  font-size: 16px;
  font-weight: 600;
  color:rgba(0,0,0,0.6);
}
.more{
  float: left;
  position: absolute;
  top: 16px;
  right: 34px;
  width: 48px !important;
  line-height: 19px;
  background: url('../assets/image/index/crit.gif') no-repeat right center !important;
  padding-right: 10px;
  font-size: 16px;
  cursor: pointer;
}
</style>
